<template>
  <div class="coc-character-sheet" id="printable-area">
    <!-- 角色基本信息 -->
    <div class="section basic-info">
      <div class="row">
        <el-input v-model="character.name" placeholder="姓名" class="name-input"></el-input>
        <el-input v-model="character.player" placeholder="玩家"></el-input>
      </div>
      <div class="row">
        <el-select v-model="character.occupation" placeholder="职业">
          <el-option
              v-for="occupation in occupations"
              :key="occupation.value"
              :label="occupation.label"
              :value="occupation.value"
          ></el-option>
        </el-select>
        <el-input v-model="character.age" placeholder="年龄"></el-input>
        <el-select v-model="character.gender" placeholder="性别">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
          <el-option label="其他" value="other"></el-option>
        </el-select>
      </div>
      <div class="row">
        <el-input v-model="character.residence" placeholder="住所"></el-input>
        <el-input v-model="character.birthplace" placeholder="出身"></el-input>
      </div>
    </div>

    <!-- 主要属性 -->
    <div class="section attributes">
      <h2>主要属性</h2>
      <div class="attribute-grid">
        <div v-for="attr in mainAttributes" :key="attr" class="attribute-item">
          <label>{{ attrLabels[attr] }}</label>
          <el-input-number
              v-model="character.attributes[attr]"
              :min="0"
              :max="99"
              controls-position="right"
          ></el-input-number>
          <div class="derived-values">
            <span>困难: {{ Math.floor(character.attributes[attr] / 2) }}</span>
            <span>极难: {{ Math.floor(character.attributes[attr] / 5) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 次要属性 -->
    <div class="section derived-attributes">
      <h2>次要属性</h2>
      <div class="derived-grid">
        <div class="derived-item">
          <label>伤害加值</label>
          <span>{{ damageBonus }}</span>
        </div>
        <div class="derived-item">
          <label>体格</label>
          <span>{{ build }}</span>
        </div>
        <div class="derived-item">
          <label>闪避</label>
          <span>{{ Math.floor(character.attributes.DEX / 2) }}</span>
        </div>
        <div class="derived-item">
          <label>耐久值</label>
          <span>{{ hp }}</span>
        </div>
        <div class="derived-item">
          <label>移动速度</label>
          <span>8</span>
        </div>
        <div class="derived-item">
          <label>理智值</label>
          <span>{{ character.attributes.POW }}</span>
        </div>
        <div class="derived-item">
          <label>魔法值</label>
          <span>{{ Math.floor(character.attributes.POW / 5) }}</span>
        </div>
        <div class="derived-item">
          <label>幸运</label>
          <el-input-number
              v-model="character.luck"
              :min="0"
              :max="99"
              controls-position="right"
          ></el-input-number>
        </div>
      </div>
    </div>

    <!-- 技能 -->
    <div class="section skills">
      <h2>技能</h2>
      <div class="skill-categories">
        <div class="skill-category" v-for="category in skillCategories" :key="category.name">
          <h3>{{ category.name }}</h3>
          <div class="skill-list">
            <div class="skill-item" v-for="skill in category.skills" :key="skill.name">
              <label :class="{ 'occupation-skill': isOccupationSkill(skill.name) }">
                {{ skill.name }} ({{ skill.base }}%)
                <el-tooltip v-if="isOccupationSkill(skill.name)" content="职业技能" placement="top">
                  <el-icon>
                    <Star/>
                  </el-icon>
                </el-tooltip>
              </label>
              <el-input-number
                  v-model="character.skills[skill.name]"
                  :min="0"
                  :max="99"
                  controls-position="right"
              ></el-input-number>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 武器 -->
    <div class="section weapons">
      <h2>武器</h2>
      <el-table :data="character.weapons" style="width: 100%">
        <el-table-column prop="name" label="武器" width="180"></el-table-column>
        <el-table-column prop="regular" label="常规" width="80"></el-table-column>
        <el-table-column prop="hard" label="困难" width="80"></el-table-column>
        <el-table-column prop="extreme" label="极难" width="80"></el-table-column>
        <el-table-column prop="damage" label="伤害" width="80"></el-table-column>
        <el-table-column prop="range" label="射程" width="80"></el-table-column>
        <el-table-column prop="attacks" label="次数" width="80"></el-table-column>
        <el-table-column prop="ammo" label="装弹量" width="80"></el-table-column>
        <el-table-column prop="malfunction" label="故障值" width="80"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small">编辑</el-button>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" class="add-weapon-btn">添加武器</el-button>
    </div>

    <!-- 背景故事 -->
    <div class="section background">
      <h2>背景故事</h2>
      <el-input
          v-model="character.background"
          type="textarea"
          :rows="4"
          placeholder="角色的背景故事..."
      ></el-input>
    </div>

    <!-- 操作按钮 -->
    <div class="actions">
      <el-button type="primary">打印角色卡</el-button>
      <el-button>重置角色</el-button>
      <el-button>投掷骰子</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, watch} from 'vue'
import {Star} from '@element-plus/icons-vue'

// 角色数据
const character = ref({
  name: '',
  player: '',
  occupation: '',
  age: '',
  gender: '',
  residence: '',
  birthplace: '',
  attributes: {
    STR: 50,
    CON: 50,
    POW: 50,
    DEX: 50,
    APP: 50,
    SIZ: 50,
    INT: 50,
    EDU: 50
  },
  luck: 50,
  skills: {},
  weapons: [],
  background: '',
  assets: {
    cash: 0,
    creditRating: 0,
    possessions: []
  },
  mentalDisorders: [],
  injuries: [],
  mythosEncounters: []
})

// 属性标签
const attrLabels = {
  STR: '力量',
  CON: '体质',
  POW: '意志',
  DEX: '敏捷',
  APP: '外貌',
  SIZ: '体型',
  INT: '智力',
  EDU: '教育'
}

// 主要属性列表
const mainAttributes = ['STR', 'CON', 'POW', 'DEX', 'APP', 'SIZ', 'INT', 'EDU']

// 计算属性总和
const attributesTotal = computed(() => {
  return mainAttributes.reduce((total, attr) => {
    return total + character.value.attributes[attr]
  }, 0)
})

// 完整的职业列表（根据COC7调查员手册）
const occupations = [
  {value: 'accountant', label: '会计师', credit: '30-70', skillPoints: 'EDU×2 + INT×2'},
  {value: 'acrobat', label: '杂技演员', credit: '9-20', skillPoints: 'DEX×2 + STR×2'},
  {value: 'actor', label: '演员', credit: '10-60', skillPoints: 'EDU×2 + APP×2'},
  {value: 'antiquarian', label: '古董商', credit: '30-70', skillPoints: 'EDU×2 + APP×2'},
  {value: 'archaeologist', label: '考古学家', credit: '9-50', skillPoints: 'EDU×2 + INT×2'},
  {value: 'artist', label: '艺术家', credit: '9-40', skillPoints: 'EDU×2 + APP×2'},
  {value: 'athlete', label: '运动员', credit: '9-40', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'author', label: '作家', credit: '10-40', skillPoints: 'EDU×4'},
  {value: 'bartender', label: '酒保', credit: '8-25', skillPoints: 'EDU×2 + APP×2'},
  {value: 'bountyHunter', label: '赏金猎人', credit: '9-50', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'boxer', label: '拳击手', credit: '8-20', skillPoints: 'EDU×2 + STR×2'},
  {value: 'butler', label: '管家', credit: '10-40', skillPoints: 'EDU×2 + APP×2'},
  {value: 'clergy', label: '神职人员', credit: '10-70', skillPoints: 'EDU×2 + POW×2'},
  {value: 'cowboy', label: '牛仔', credit: '9-40', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'craftsman', label: '工匠', credit: '5-75', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'criminal', label: '罪犯', credit: '5-65', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'detective', label: '侦探', credit: '20-80', skillPoints: 'EDU×2 + INT×2'},
  {value: 'doctor', label: '医生', credit: '30-80', skillPoints: 'EDU×4'},
  {value: 'driver', label: '司机', credit: '9-40', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'engineer', label: '工程师', credit: '30-70', skillPoints: 'EDU×2 + INT×2'},
  {value: 'farmer', label: '农民', credit: '5-40', skillPoints: 'EDU×2 + STR×2'},
  {value: 'journalist', label: '记者', credit: '10-60', skillPoints: 'EDU×2 + APP×2'},
  {value: 'lawyer', label: '律师', credit: '30-80', skillPoints: 'EDU×4'},
  {value: 'librarian', label: '图书管理员', credit: '10-40', skillPoints: 'EDU×4'},
  {value: 'mechanic', label: '机械师', credit: '10-40', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'musician', label: '音乐家', credit: '9-50', skillPoints: 'EDU×2 + APP×2'},
  {value: 'nurse', label: '护士', credit: '10-40', skillPoints: 'EDU×2 + APP×2'},
  {value: 'pilot', label: '飞行员', credit: '20-70', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'police', label: '警察', credit: '20-50', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'professor', label: '教授', credit: '30-70', skillPoints: 'EDU×4'},
  {value: 'scientist', label: '科学家', credit: '30-70', skillPoints: 'EDU×4'},
  {value: 'soldier', label: '士兵', credit: '9-30', skillPoints: 'EDU×2 + DEX×2'},
  {value: 'student', label: '学生', credit: '1-20', skillPoints: 'EDU×2 + INT×2'},
  {value: 'worker', label: '工人', credit: '5-40', skillPoints: 'EDU×2 + STR×2'}
]

// 职业技能映射（完整版）
const occupationSkills = {
  accountant: ['会计', '法律', '图书馆使用', '聆听', '说服', '侦查', '信用评级', '计算机使用'],
  actor: ['表演', '乔装', '心理学', '历史', '取悦', '话术', '恐吓', '说服'],
  antiquarian: ['估价', '历史', '图书馆使用', '外语', '侦查', '信用评级', '说服', '心理学'],
  archaeologist: ['考古学', '历史', '图书馆使用', '外语', '侦查', '导航', '科学(地质学)', '科学(化学)'],
  artist: ['艺术/手艺', '历史', '心理学', '取悦', '摄影', '侦查', '外语', '图书馆使用'],
  doctor: ['医学', '急救', '心理学', '科学(生物学)', '科学(药学)', '信用评级', '侦查', '说服'],
  journalist: ['图书馆使用', '历史', '母语', '说服', '心理学', '潜行', '摄影', '汽车驾驶'],
  professor: ['图书馆使用', '历史', '外语', '母语', '说服', '心理学', '侦查', '信用评级'],
  criminal: ['潜行', '锁匠', '妙手', '侦查', '心理学', '说服', '斗殴', '射击(手枪)'],
  detective: ['侦查', '图书馆使用', '心理学', '说服', '法律', '汽车驾驶', '射击(手枪)', '潜行'],
  soldier: ['射击(步枪)', '急救', '潜行', '跳跃', '投掷', '格斗', '心理学', '生存'],
  worker: ['机械维修', '电气维修', '操作重型机械', '驾驶', '跳跃', '攀爬', '急救', '科学(工程学)'],
  // 其他职业...
}

// 计算职业技能点数
const occupationSkillPoints = computed(() => {
  if (!character.value.occupation) return 0

  const occupation = occupations.find(occ => occ.value === character.value.occupation)
  if (!occupation) return 0

  // 解析技能点数计算公式
  const formula = occupation.skillPoints
  if (formula.includes('×4')) {
    const attr = formula.split('×')[0]
    return character.value.attributes[attr] * 4
  } else if (formula.includes('×2')) {
    const attrs = formula.split(' + ')
    return attrs.reduce((total, attrExpr) => {
      const attr = attrExpr.split('×')[0]
      return total + character.value.attributes[attr] * 2
    }, 0)
  }
  return 0
})

// 计算兴趣技能点数（INT×2）
const interestSkillPoints = computed(() => {
  return character.value.attributes.INT * 2
})

// 完整的技能分类（COC7版核心技能）
const skillCategories = [
  {
    name: '交流',
    skills: [
      {name: '会计', base: 5},
      {name: '人类学', base: 1},
      {name: '估价', base: 5},
      {name: '考古学', base: 1},
      {name: '艺术/手艺', base: 5},
      {name: '取悦', base: 15},
      {name: '信用评级', base: 0},
      {name: '乔装', base: 5},
      {name: '话术', base: 5},
      {name: '恐吓', base: 15},
      {name: '母语', base: 0},
      {name: '外语', base: 1},
      {name: '说服', base: 10},
      {name: '心理学', base: 10}
    ]
  },
  {
    name: '运动',
    skills: [
      {name: '攀爬', base: 20},
      {name: '闪避', base: 0},
      {name: '跳跃', base: 20},
      {name: '骑术', base: 5},
      {name: '游泳', base: 20},
      {name: '投掷', base: 20}
    ]
  },
  {
    name: '战斗',
    skills: [
      {name: '斗殴', base: 25},
      {name: '射击(手枪)', base: 20},
      {name: '射击(步枪/霰弹枪)', base: 25},
      {name: '射击(冲锋枪)', base: 15},
      {name: '射击(弓术)', base: 15},
      {name: '射击(火焰喷射器)', base: 10},
      {name: '射击(机关枪)', base: 10},
      {name: '射击(重武器)', base: 10}
    ]
  },
  {
    name: '调查',
    skills: [
      {name: '历史', base: 5},
      {name: '图书馆使用', base: 20},
      {name: '聆听', base: 20},
      {name: '自然学', base: 10},
      {name: '导航', base: 10},
      {name: '神秘学', base: 5},
      {name: '侦查', base: 25},
      {name: '潜行', base: 20},
      {name: '追踪', base: 10}
    ]
  },
  {
    name: '其他',
    skills: [
      {name: '急救', base: 30},
      {name: '法律', base: 5},
      {name: '锁匠', base: 1},
      {name: '机械维修', base: 10},
      {name: '医学', base: 1},
      {name: '电气维修', base: 10},
      {name: '妙手', base: 10},
      {name: '科学(生物学)', base: 1},
      {name: '科学(化学)', base: 1},
      {name: '科学(药学)', base: 1},
      {name: '科学(物理学)', base: 1},
      {name: '科学(天文学)', base: 1},
      {name: '科学(地质学)', base: 1},
      {name: '科学(植物学)', base: 1},
      {name: '科学(动物学)', base: 1},
      {name: '科学(密码学)', base: 1},
      {name: '科学(工程学)', base: 1},
      {name: '科学(气象学)', base: 1},
      {name: '科学(司法科学)', base: 1},
      {name: '计算机使用', base: 5},
      {name: '操作重型机械', base: 1},
      {name: '驾驶(汽车)', base: 20},
      {name: '驾驶(飞行器)', base: 1},
      {name: '驾驶(船)', base: 1},
      {name: '爆破', base: 1},
      {name: '读唇', base: 1},
      {name: '催眠', base: 1},
      {name: '克苏鲁神话', base: 0}
    ]
  }
]

// 初始化技能值
const initializeSkills = () => {
  skillCategories.forEach(category => {
    category.skills.forEach(skill => {
      if (!character.value.skills[skill.name]) {
        character.value.skills[skill.name] = skill.base
      }
    })
  })
}

// 计算已分配的职业技能点数
const usedOccupationPoints = computed(() => {
  if (!character.value.occupation) return 0

  const skills = occupationSkills[character.value.occupation] || []
  return skills.reduce((total, skillName) => {
    const baseValue = skillCategories
        .flatMap(cat => cat.skills)
        .find(s => s.name === skillName)?.base || 0
    return total + (character.value.skills[skillName] - baseValue)
  }, 0)
})

// 计算已分配的兴趣技能点数
const usedInterestPoints = computed(() => {
  const occupationSkillsList = character.value.occupation
      ? occupationSkills[character.value.occupation] || []
      : []

  return Object.entries(character.value.skills).reduce((total, [skillName, value]) => {
    if (occupationSkillsList.includes(skillName)) return total

    const baseValue = skillCategories
        .flatMap(cat => cat.skills)
        .find(s => s.name === skillName)?.base || 0
    return total + (value - baseValue)
  }, 0)
})

// 自动计算属性
const damageBonus = computed(() => {
  const sum = character.value.attributes.STR + character.value.attributes.SIZ
  if (sum < 65) return '-2'
  if (sum < 85) return '-1'
  if (sum < 125) return '0'
  if (sum < 165) return '+1D4'
  if (sum < 205) return '+1D6'
  return '+2D6'
})

const build = computed(() => {
  const sum = character.value.attributes.STR + character.value.attributes.SIZ
  if (sum < 65) return '-2'
  if (sum < 85) return '-1'
  if (sum < 125) return '0'
  if (sum < 165) return '+1'
  if (sum < 205) return '+2'
  return '+3'
})

const hp = computed(() => {
  return Math.floor((character.value.attributes.CON + character.value.attributes.SIZ) / 10)
})

const magicPoints = computed(() => {
  return Math.floor(character.value.attributes.POW / 5)
})

const moveRate = computed(() => {
  const dexSize = character.value.attributes.DEX + character.value.attributes.SIZ
  if (dexSize < 65) return 7
  if (dexSize < 85) return 8
  if (dexSize < 125) return 9
  return 10
})

const dodge = computed(() => {
  return Math.floor(character.value.attributes.DEX / 2)
})

// 检查是否是职业技能
const isOccupationSkill = (skillName) => {
  return character.value.occupation
      ? occupationSkills[character.value.occupation]?.includes(skillName) || false
      : false
}

// 职业变更时更新信用评级
const updateCreditRating = () => {
  const occupation = occupations.find(occ => occ.value === character.value.occupation)
  if (occupation) {
    const [min, max] = occupation.credit.split('-').map(Number)
    character.value.assets.creditRating = Math.floor((min + max) / 2)
  }
}

// 计算剩余职业技能点数
const remainingOccupationPoints = computed(() => {
  return occupationSkillPoints.value - usedOccupationPoints.value
})

// 计算剩余兴趣技能点数
const remainingInterestPoints = computed(() => {
  return interestSkillPoints.value - usedInterestPoints.value
})

// 计算技能最大值（基础值+剩余点数）
const getSkillMax = (skill) => {
  const baseValue = skill.base || 0
  if (isOccupationSkill(skill.name)) {
    return baseValue + remainingOccupationPoints.value
  } else {
    return baseValue + remainingInterestPoints.value
  }
}

// 监听职业变化
watch(() => character.value.occupation, () => {
  updateCreditRating()
  initializeSkills()
})

// 监听年龄变化，计算年龄调整值
const ageModifiers = computed(() => {
  const age = parseInt(character.value.age) || 20
  if (age < 15) return {STR: -5, CON: -5, SIZ: -5, DEX: +5, INT: -5, EDU: -5}
  if (age < 19) return {STR: 0, CON: 0, SIZ: 0, DEX: 0, INT: 0, EDU: 0}
  if (age < 40) return {STR: 0, CON: 0, SIZ: 0, DEX: 0, INT: 0, EDU: +5}
  if (age < 50) return {STR: -5, CON: -5, SIZ: 0, DEX: -5, INT: 0, EDU: +10}
  if (age < 60) return {STR: -10, CON: -10, SIZ: -5, DEX: -10, INT: 0, EDU: +15}
  return {STR: -20, CON: -20, SIZ: -10, DEX: -20, INT: 0, EDU: +20}
})

// 应用年龄调整
watch(() => character.value.age, () => {
  const modifiers = ageModifiers.value
  mainAttributes.forEach(attr => {
    if (modifiers[attr]) {
      character.value.attributes[attr] = Math.max(15,
          Math.min(90, character.value.attributes[attr] + modifiers[attr]))
    }
  })
})

// 计算幸运值（3D6×5）
const calculateLuck = () => {
  const roll = Math.floor(Math.random() * 6 + 1) +
      Math.floor(Math.random() * 6 + 1) +
      Math.floor(Math.random() * 6 + 1)
  character.value.luck = roll * 5
}

// 随机生成属性值（标准COC7版分配法）
const randomizeAttributes = () => {
  const values = [40, 50, 50, 50, 60, 60, 70, 80]
  // 随机打乱数组
  const shuffled = [...values].sort(() => Math.random() - 0.5)
  mainAttributes.forEach((attr, index) => {
    character.value.attributes[attr] = shuffled[index]
  })
  calculateLuck()
}

// 添加武器
const addWeapon = () => {
  character.value.weapons.push({
    name: '',
    regular: 0,
    hard: 0,
    extreme: 0,
    damage: '',
    range: '',
    attacks: 1,
    ammo: '',
    malfunction: ''
  })
}

// 删除武器
const removeWeapon = (index) => {
  character.value.weapons.splice(index, 1)
}

// 计算武器技能值
const calculateWeaponSkills = () => {
  character.value.weapons.forEach(weapon => {
    if (weapon.name && character.value.skills[weapon.name]) {
      weapon.regular = character.value.skills[weapon.name]
      weapon.hard = Math.floor(weapon.regular / 2)
      weapon.extreme = Math.floor(weapon.regular / 5)
    }
  })
}

// 监听技能变化更新武器技能
watch(() => character.value.skills, () => {
  calculateWeaponSkills()
}, {deep: true})

// 添加资产
const addAsset = () => {
  character.value.assets.possessions.push({
    name: '',
    description: '',
    value: 0
  })
}

// 添加精神障碍
const addMentalDisorder = () => {
  character.value.mentalDisorders.push({
    type: '',
    description: '',
    severity: 'mild'
  })
}

// 添加伤害记录
const addInjury = () => {
  character.value.injuries.push({
    type: '',
    description: '',
    severity: 'minor',
    healingTime: ''
  })
}

// 添加神话接触记录
const addMythosEncounter = () => {
  character.value.mythosEncounters.push({
    type: '',
    description: '',
    sanLoss: 0,
    knowledgeGained: ''
  })
}

// 计算理智值(SAN)变化
const updateSanity = (change) => {
  character.value.sanity = Math.max(0,
      Math.min(99, (character.value.sanity || character.value.attributes.POW) + change))
}

// 初始化角色
const initializeCharacter = () => {
  randomizeAttributes()
  initializeSkills()
  updateCreditRating()
  calculateLuck()
}

// 导出角色卡为JSON
const exportCharacter = () => {
  const data = JSON.stringify(character.value, null, 2)
  const blob = new Blob([data], {type: 'application/json'})
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `COC角色卡_${character.value.name || '未命名'}.json`
  link.click()
}

// 导入角色卡
const importCharacter = (event) => {
  const file = event.target.files[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const data = JSON.parse(e.target.result)
      character.value = data
    } catch (error) {
      console.error('导入失败:', error)
    }
  }
  reader.readAsText(file)
}

// 重置角色卡
const resetCharacter = () => {
  if (confirm('确定要重置角色卡吗？所有数据将被清空！')) {
    character.value = {
      name: '',
      player: '',
      occupation: '',
      age: '',
      gender: '',
      residence: '',
      birthplace: '',
      attributes: {
        STR: 50,
        CON: 50,
        POW: 50,
        DEX: 50,
        APP: 50,
        SIZ: 50,
        INT: 50,
        EDU: 50
      },
      luck: 50,
      skills: {},
      weapons: [],
      background: '',
      assets: {
        cash: 0,
        creditRating: 0,
        possessions: []
      },
      mentalDisorders: [],
      injuries: [],
      mythosEncounters: []
    }
    initializeSkills()
  }
}

// 初始化角色
initializeCharacter()
</script>


<style scoped>
.coc-character-sheet {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  color: #333;
  font-family: 'Arial', sans-serif;
}

.section {
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section h2 {
  color: #8b0000;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 0;
}

.section h3 {
  color: #555;
  font-size: 1.1em;
  margin: 10px 0;
}

.row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.row .el-input,
.row .el-select {
  flex: 1;
}

.name-input {
  flex: 2;
}

.attribute-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.attribute-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.attribute-item label {
  font-weight: bold;
  margin-bottom: 5px;
}

.derived-values {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
  display: flex;
  gap: 10px;
}

.derived-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.derived-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.derived-item label {
  font-weight: bold;
  margin-bottom: 5px;
}

.skill-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.skill-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.skill-item label {
  flex: 1;
  margin-right: 10px;
}

.occupation-skill {
  color: #8b0000;
  font-weight: bold;
}

.add-weapon-btn {
  margin-top: 10px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

/* 打印样式 */
@media print {
  body * {
    visibility: hidden;
  }

  #printable-area, #printable-area * {
    visibility: visible;
  }

  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: white;
    padding: 0;
    margin: 0;
  }

  .actions {
    display: none;
  }
}
</style>
